$(() => {
    // 解构的方法，获取到layui里面的form对象（键）的值
  const { form } = layui;
  initArtCateList();

  function initArtCateList() {
    $.ajax({
      method: "get",
      url: "my/article/cates",
      success: (res) => {
        if (res.status !== 0) {
          return layer.msg("获取失败");
        }
        // console.log(res);
        var htmlStr = template("tpl-table", res);
        $("tbody").html(htmlStr);
      },
    });
  }

  let indexAdd = null;
  // 调用layui里面的方法，点击添加之后出弹窗，再把模版引擎里的东西渲染再页面上
  $("#btnAddCate").click(() => {
    // 调用layui里面的方法
    indexAdd = layer.open({
      type: 1,
      area: ["500px", "250px"],
      title: "添加文章分类",
      content: $("#dialog-add").html(),
    });
  });
  // 必须通过委托的方式，不然模版引擎里的form是点击后才会添加的，无法绑定submit事件
  $("body").on("submit", "#form-add", function (e) {
    e.preventDefault();
    $.ajax({
      method: "post",
      url: "my/article/addcates",
      data: $(this).serialize(), // dom转成jquery对象,dom元素没有serilize方法
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg(res.message);
        }
        // console.log(res);
        layer.msg(res.message);
      },
    });
    initArtCateList();
    // console.log(indexAdd);
    layer.close(indexAdd);
  });

  // 声明一个变量来装layer.open返回的值
  let indexEdit = null;
  // 事件委托，给编辑按钮添加点击事件，点击之后出现弹框，内容渲染上去
  $("tbody").on("click", "#btn-edit", function () {
    // 调用layui里面的方法
    indexEdit = layer.open({
      type: 1,
      area: ["500px", "250px"],
      title: "添加文章分类",
      content: $("#dialog-edit").html(),
    });

    const id = $(this).data('id');
    $.ajax({
        method:'get',
        url:'my/article/cates/' + id,
        success:function(res){
            form.val('form-edit', res.data)
        }
    })
  });
  //事件委托，因为是动态添加的表单，把修改好的数据传到服务器
  $('body').on('submit','#form-edit',function(e){
      e.preventDefault();
      $.ajax({
          method:'post',
          url:'my/article/updatecate',
          data:$(this).serialize(),
          success(res){
              if(res.status !== 0){
                  return layer.msg('更新分类数据失败！')
              }
              // 把修改好的数据重新渲染上去
              initArtCateList() 
              // 关闭弹窗
              layer.close(indexEdit)
          }
      })
  })

  // 事件委托，点击删除按钮，利用layui的方法弹出删除框，在回调函数里发起ajax请求把点击对象的id删除
  $('tbody').on('click','.btn-delete',function(){
      let id = $(this).data('id');
      layer.confirm('确认删除?', { icon: 3, title: '提示' }, function(index){ // index指的是弹框
          $.ajax({
              method:'get',
              url:'my/article/deletecate/' + id,
            success(res){
                if(res.status !== 0){
                    return layer.msg('删除失败')
                }
                layer.msg('删除成功')
                layer.close(index);
                initArtCateList()
            }
          })
      })
  })
});
